import { Avatar, ConfigProvider, Image, SearchBar } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import { useCallback, useMemo, useState } from 'react';
import coffee from '@/assets/images/coffee.png';
import food from '@/assets/images/food.png';
import hamburg from '@/assets/images/hamburg.png';
import lightFood from '@/assets/images/light-food.png';
import BasicLayout from '@/components/BasicLayout';
import ShopCard from '@/components/ShopCard';
import useNavBarInfo from '@/hooks/useNavBarInfo';
import gql from 'graphql-tag';
import useQuery from '@/hooks/useQuery';
import { ShopFields } from '@/types/ShopEntity';

const SelShopListQuery = gql`
    query SelShopList($address:String,$order:String,$keyword:String){
        selShopList(address:$address,order:$order,keyword:$keyword){
             ${ShopFields}
        }
    }
`
export default function Index() {
  const { data: shopListData, refetch } = useQuery(SelShopListQuery)
  const shopList = useMemo(() => shopListData?.selShopList || [], [shopListData])
  useLoad(() => {
    console.log('Page loaded.');
  });

  // 获取导航栏信息
  const { statusBarHeight, titelBarWidth, titleBarHeight } = useNavBarInfo();

  // 搜索
  const onClickSearch = () => {
    Taro.navigateTo({ url: '/pages/Search/index' });
  };

  // 店铺列表
  const onClickShopList = (name: string) => {
    Taro.navigateTo({ url: '/pages/ShopList/index?address=' + name });
  };

  // 菜单列表
  const menuList = [
    {
      name: '第一食堂',
      icon: coffee,
    },
    {
      name: '第二食堂',
      icon: hamburg,
    },
    {
      name: '第三食堂',
      icon: lightFood,
    },
    {
      name: '街边小吃',
      icon: food,
    },
  ];

  // 排序列表
  const sortList = [
    {
      id: 'nearby',
      name: '附近商户',
    },
    {
      id: 'sales',
      name: '销量',
    },
    {
      id: 'price',
      name: '配送费',
    },
  ];
  const [activeSortId, setActiveSortId] = useState('nearby');
  const changeActiveSortId = useCallback((sort: string) => {
    setActiveSortId(sort);
    refetch({ order: sort })
  }, [])
  return (
    <BasicLayout>
      {/* 导航栏  */}
      <View className="bg-gradient-to-r from-[#157658] to-[#156c76]">
        <View style={{ height: statusBarHeight }}></View>
        <View
          className="flex-align flex-row"
          style={{ width: titelBarWidth, height: titleBarHeight }}
        >
        </View>
      </View>

      {/* 搜索  */}
      <View className="sticky top-0 z-2">
        <View className="py-[14rpx] bg-gradient-to-r from-[#157658] to-[#156c76]">
          <ConfigProvider
            theme={{
              nutuiSearchbarBackground: 'linear-gradient(100deg, #157658, #156c76);',
            }}
          >
            <SearchBar shape="round" disabled onInputClick={onClickSearch} />
          </ConfigProvider>
        </View>
      </View>

      {/* 宫格  */}
      <View className="flex justify-between flex-row mx-[32rpx] mt-[24rpx] py-[24rpx] px-[16rpx] bg-[#fff] rounded-2">
        {menuList.map((item) => (
          <View key={item.name} className="flex-center flex-col" onClick={onClickShopList.bind(null, item.name)}>
            <Image src={item.icon} width="40" height="40" />
            <View className="w-[120rpx] text-[28rpx] mt-[12rpx] text-gray-700 py-[4rpx] truncate">
              {item.name}
            </View>
          </View>
        ))}
      </View>

      {/* 排序 */}
      <View className="flex flex-row mx-[32rpx] my-[24rpx] text-gray-700 text-[28rpx]">
        {sortList.map((item) => (
          <View
            key={item.id}
            className={`'mr-[32rpx]' ${activeSortId === item.id && 'font-bold'}`}
            onClick={() => changeActiveSortId(item.id)}
          >
            {item.name}
          </View>
        ))}
      </View>

      {/* 店铺列表 */}
      {shopList.map((item => (
        <ShopCard
          key={item.id}
          {...item}
        />
      )))}

    </BasicLayout>
  );
}
